<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <el-menu class="el-menu-demo end" mode="horizontal" active-text-color="#54b1ff" default-active="1">
          <el-menu-item index="1" style="font-weight:700;font-size:18px">员工历史归档</el-menu-item>
          <!-- <el-row type="flex" justify="end"> -->
          <el-menu-item class="ends">
            <el-date-picker
              v-model="value"
              type="year"
              placeholder="选择年"
              @change="ChangeDate"
            />
          </el-menu-item>
          <!-- </el-row> -->
        </el-menu>
        <!-- //归档列表 -->
        <history v-for="item in historysList" :key="item.id" :historys-list="item" />
        <!-- <history /> -->
      </el-card>
    </div>
  </div>
</template>

<script>
// 历史归档
import history from './components/component_history'
// 获取归档列表
import { gethistory } from '@/api/approvals'
export default {
  components: {
    history
  },
  data() {
    return {
      value: '2021', // 给年份设置一个默认年份
      historysList: []// 历史归档列表
    }
  },
  created() {
    this.gethistory()
  },
  methods: {
    async gethistory() {
      const res = await gethistory()
      this.historysList = [...res]
      console.log(this.historysList)
    },
    // 修改年份
    ChangeDate(date) {
      // console.log(date.toString())
      // this.value = date.toString().split(' ')[3]
      // // console.log(this.value)
      // // 修改日期之后重新发请求 获取当前选中年份的归档
      // this.gethistory()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .end{
    position: relative;

    .ends{
    position: absolute;
    top: 0px;
    right: 0px;
}
}
//去掉卡片的边距
::v-deep .el-card__body{
    padding: 0;
}
</style>
